<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <ui:composition template="comun.xhtml">
        <ui:define name="body">
            <p:ajaxStatus style="width:75px;height:75px;position:fixed;right:100px;bottom:100px">  
                            <f:facet name="start">  
                                <p:graphicImage value="http://#{initParam['DIRECCION_SERVIDOR']}/Iconos/loading.gif" />  
                            </f:facet>  

                            <f:facet name="complete">  
                                <h:outputText value="" />  
                            </f:facet>  
            </p:ajaxStatus>
            <h:form id="formularioActualizarDatosID"  >

                <p:remoteCommand  name="iniciarDatos"
                                  process="@this"
                                  update="formularioActualizarDatosID"
                                  actionListener="#{actualizarDatosUsuarioControlador.iniciarDatos()}" />

                <h:outputLabel value="Cargar Imagen:" />
                <p:panel id="panelImagen">
                    <p:fileUpload fileUploadListener="#{actualizarDatosUsuarioControlador.subirFoto}"  
                                  mode="advanced" multiple="true" label="BuscarFoto" uploadLabel="SubirFoto"
                                  cancelLabel="Cancelar"
                                      update=":formularioActualizarDatosID:panelImagen panelActualizarDatosUsuario :fomularioComunID"
                                      allowTypes="/(\.|\/)(gif|jpe?g|png)$/" sizeLimit="100000" process="@this"/>
                    
                </p:panel>  
                
                
                <p:outputPanel  id="panelActualizarDatosUsuario" style="padding: 2px; width:290px; margin:auto;">
                    <p:growl id="growl" showDetail="true" sticky="true" />
                    <p:panelGrid columns="2">


                        <h:outputLabel value="foto:"/>
                        <p:outputPanel id="panelImagenCargadaID">
                            <h:graphicImage id="imagenCargadaID" value="#{actualizarDatosUsuarioDataManager.usuario.usImagen}" width="50" height="50" />
                        </p:outputPanel>


                        <h:outputLabel value="Nombre:" />
                        <h:inputText id="ingNombreID" size="20" value="#{actualizarDatosUsuarioDataManager.usuario.usNombre}" 
                                     required="true" requiredMessage="El nombre es requerido"
                                     validatorMessage="El Nombre debe poseer máximo 20 caracteres"
                                     onkeyup="javascript:this.value=this.value.toUpperCase();">
                            <f:validateLength maximum="20" />
                        </h:inputText>

                        <h:outputLabel value="Primer Apellido:" />
                        <h:inputText id="ingPrimerApellidoID" size="20" value="#{actualizarDatosUsuarioDataManager.usuario.usPrimerApellido}" 
                                     required="true" requiredMessage="El primer apellido es requerido"
                                     validatorMessage="El Primer Apellido debe poseer máximo 20 caracteres"
                                     onkeyup="javascript:this.value=this.value.toUpperCase();">
                            <f:validateLength maximum="20" />

                        </h:inputText>


                        <h:outputLabel value="Segundo Apellido:" />
                        <h:inputText size="20" value="#{actualizarDatosUsuarioDataManager.usuario.usSegundoApellido}"
                                     validatorMessage="El Segundo Apellido debe poseer máximo 20 caracteres"
                                     onkeyup="javascript:this.value=this.value.toUpperCase();">
                            <f:validateLength maximum="20" />
                        </h:inputText>   

                        <h:outputLabel value="Operadora Celular:" />
                        <h:selectOneMenu value="#{actualizarDatosUsuarioDataManager.usuario.opCodigo}" 
                                         required="true" 
                                        requiredMessage="La operadora celular es requerida">
                            <f:converter converterId="operadoraConvertidor" />
                            <f:selectItems value="#{actualizarDatosUsuarioControlador.selectItemOperadora}"/>
                        </h:selectOneMenu>  

                        <h:outputLabel value="Celular:" />
                        <p:inputMask value="#{actualizarDatosUsuarioDataManager.usuario.usTelefono}"
                                     mask="9999-999-999" size="20"
                                     required="true" 
                                     requiredMessage="El número celular es requerido"/> 

                        <h:outputLabel value="Fecha de Nacimiento:" />
                        <p:calendar id="ingFechaNacimientoID" value="#{actualizarDatosUsuarioDataManager.usuario.usFechaNacimiento}" 
                                    navigator="true" pattern="d/M/yyyy" showOn="button" yearRange="c-30:c+30" maxdate="#{actualizarDatosUsuarioControlador.fechaActual}"
                                    required="true" 
                                    requiredMessage="La fecha de nacimiento es requerido"/> 

                        <h:outputLabel value="Sexo:" />
                        <h:selectOneMenu id="ingSexoID" value="#{actualizarDatosUsuarioDataManager.usuario.usSexo}" 
                                         required="true" 
                                         requiredMessage="El campo sexo es requerido" >
                            <f:selectItems value="#{actualizarDatosUsuarioControlador.selectItemSexo}"/>
                        </h:selectOneMenu>

                        <h:outputLabel value="País:" />
                        <h:selectOneMenu value="#{actualizarDatosUsuarioDataManager.pais}" >
                            <f:converter converterId="paisConvertidor" />
                            <f:selectItems value="#{actualizarDatosUsuarioControlador.selectItemPais}"/>
                            <p:ajax event="change" update="listaCiudadesID listaZonasID" listener="#{actualizarDatosUsuarioControlador.limpiarCiudad}">
                            </p:ajax>   

                        </h:selectOneMenu> 

                        <h:outputLabel value="Ciudad:" />
                        <h:selectOneMenu id="listaCiudadesID" value="#{actualizarDatosUsuarioDataManager.ciudad}"  >
                            <f:converter converterId="ciudadConvertidor" />
                            <f:selectItems value="#{actualizarDatosUsuarioControlador.selectItemCiudad}"/>
                            <p:ajax event="change" update="listaZonasID"/>
                        </h:selectOneMenu>

                        <h:outputLabel value="Zona:" />
                        <h:selectOneMenu id="listaZonasID"  value="#{actualizarDatosUsuarioDataManager.usuario.zoCodigo}"  
                                         required="true" 
                                         requiredMessage="La zona es requerido"  >
                            <f:converter converterId="zonaConvertidor" />
                            <f:selectItems value="#{actualizarDatosUsuarioControlador.selectItemZona}"/>
                        </h:selectOneMenu>

                        <h:outputLabel value="Dirección:" />
                        <h:inputTextarea  cols="45" rows="5" 
                                          value="#{actualizarDatosUsuarioDataManager.usuario.usDireccion}"
                                          validatorMessage="La Dirección debe poseer máximo 300 caracteres"
                                          onkeyup="javascript:this.value=this.value.toUpperCase();">
                            <f:validateLength maximum="300" />
                        </h:inputTextarea>
                    </p:panelGrid>
                    <p:panelGrid columns="2">
                        <p:commandButton id="botonActualizarDatosUsuario" value="Guardar" 
                                         action="#{actualizarDatosUsuarioControlador.guardarActualizacion}" 
                                         update="panelActualizarDatosUsuario :fomularioComunID" ajax="true" 
                                         process=":formularioActualizarDatosID:panelActualizarDatosUsuario"/>
                    </p:panelGrid>

                </p:outputPanel>
            </h:form>
        </ui:define>
    </ui:composition> 
</html>

